﻿/**
 * 提示信息
 */
var showTooltip = function(x,y,contents) {
  $('<div id="priceTrendsChartTips" class="look_box_shadow">'+contents+'</div>')
  	.css({position: 'absolute', display: 'none', top: y + 5, left: x + 15, border: '1px solid #ddd', "line-height": "16px", padding: '3px 10px 4px 10px', 'background-color': '#fff', opacity: 0.80, 'font-family': "Arial"})
  	.appendTo("body")
  	.fadeIn(200);
}

/**
 * 曲线图
 */
var curveChart = {
	container : $("#chartCell"),//容器
	chartData : new Array(),//数据
	plot : null,
	label : true,
	tips : true,
	draw : function(){
		var data = new Array();
		for(var i = 0; i < this.chartData.length; i++){
			data.push({data : this.chartData[i], xaxis: i + 1, label : "日期 : 数值"});
		}
		var plot=this.plot,container=this.container;
		
		plot = $.plot(
			container,
			data,
			{
				series: {
					lines: {show: true},
					points: { show: true }
				},
				crosshair: {mode: "x"},
				grid: {hoverable: true, borderWidth: 1, borderColor: "#dddddd", tickColor: "#eeeeee", tickLabel: "fontSize:32px"},
				xaxis: {mode : "time"}
			}
		);
		
		var legends = this.container.find(".legendLabel");
		if(this.tips){
			var updateLegendTimeout = null;
			var latestPosition = null;
			var previousPoint = null;
			
			//提示信息
			function updateLegend() {
				updateLegendTimeout = null;
				var pos = latestPosition;
				var axes = plot.getAxes();
				if (pos.x < axes.xaxis.min || pos.x > axes.xaxis.max || pos.y < axes.yaxis.min || pos.y > axes.yaxis.max){
					return;
				}
				var dataset = plot.getData();
				for (i = 0; i < dataset.length; ++i) {
					var series = dataset[i];
					for (j = 0; j < series.data.length; ++j){
						if (series.data[j][0] <= pos.x){
							break;
						}
						var y, p1 = series.data[j - 1], p2 = series.data[j];
						if (p1 == null){
							y = p2[1];
						}else if (p2 == null){
							y = p1[1];
						}else{
							y = p1[1] + (p2[1] - p1[1]) * (pos.x - p1[0]) / (p2[0] - p1[0]);
						}
						legends.eq(i).text(look.dateFormat(new Date(pos.x), "yyyy-MM-dd") + " : " + y.toFixed(2));
					}
				}
			}
			container.bind("plothover", function(event,pos,item) {
				latestPosition = pos;
				if (!updateLegendTimeout) {
					updateLegend();
				}
				if(item){
				  	if (previousPoint != item.dataIndex) {
						previousPoint = item.dataIndex;
						$("#priceTrendsChartTips").remove();
						var x = look.dateFormat(new Date(item.datapoint[0]), "yyyy-MM-dd"),
							y = item.datapoint[1].toFixed(2);
						showTooltip(item.pageX, item.pageY,"日期 : " + x + "<br>数值 : " + y);
				    }
				}else{
					$("#priceTrendsChartTips").remove();
					previousPoint=null;            
				}
			});
		}
	}
}

/**
 * 柱状图
 */
var stackChart = {
	container: $("#chartCell"),//容器
	chartData: new Array(),//数据
	label: true,
	tips: true,
	draw: function(){
		var data = new Array(), ticksArray;
		for(var i = 0; i < this.chartData.length; i++){
			var newArray = new Array();
				ticksArray = new Array();
			for(var j = 0; j < this.chartData[i].length; j++){
				newArray.push(new Array(j, this.chartData[i][j][1]));//{data : this.chartData[i], xaxis: i + 1, label : "日期 : 数值"}
				ticksArray.push(new Array(j, this.chartData[i][j][0]));
			}
			data.push({data: newArray, label : "设备 : 数值"});
		}
		var plot = this.plot, container = this.container, stack = this.stack;
		
		plot = $.plot(container, data, {
			series: {
				lines: { show: false, fill: true, steps: true},
				bars: { show: true, barWidth: 0.4, align: "align"}
			},
			grid:{hoverable: true, borderWidth:1, borderColor:"#dddddd", tickColor:"#eeeeee"},
			xaxis:{ticks: ticksArray}
		});
		
		var legends = this.container.find(".legendLabel");
		if(this.tips){
			var latestPosition = null;
			var previousPoint = null;
			
			container.bind("plothover", function(event,pos,item) {
				latestPosition = pos;
				
				if(item){
				  	if (previousPoint != item.dataIndex) {
						previousPoint = item.dataIndex;
						
						var dataset = plot.getData();
						for (i = 0; i < dataset.length; ++i) {
							var series = dataset[i];
							for (j = 0; j < series.data.length; ++j) {
								if (series.data[j][0] == Math.round(pos.x) + 1){
									break;
								}
								var y = series.data[j][1],
									x = series.xaxis.ticks[j].label;
								legends.eq(i).text(x + " : " + y);
							}
						}
				    }
				}else{
					$("#priceTrendsChartTips").remove();
					previousPoint=null;            
				}
			});
		}
	}
}

/**
 * 饼图
 */
var pieChart = {
	container : $("#chartCell"),//容器
	chartData : new Array(),//数据
	label : true,
	tips : true,
	draw: function(){
		var data = new Array();
		for(var i = 0; i < this.chartData.length; i++){
			data.push({label: this.chartData[i][0], data : this.chartData[i][1]}); //{ label: "Series"+(i+1), data: Math.floor(Math.random()*100)+1 }
		}
		var plot=this.plot,container=this.container;
		
		plot = $.plot(container,data,{
			series: {
				pie: {
					show:true,
					radius: 7/8,
					label: {
						show: true,
						radius: 1,
						/*formatter: function(label, series){
							return '<div style="font-size:8pt;text-align:center;padding:2px;color:#000;font-family:Arial;">'+label+'<br/>'+Math.round(series.percent)+'%</div>';
						},*/
						background: { opacity: 0 }
					} 
				}
			},
			grid:{hoverable:true},
			legend: {
				show: false
			}
		});
	}
}